<template>
  <div class="login-page">
    <div class="banner" ref="banner">
      <div class="login-frame">
        <div class="logo-box">
          <img src="../../assets/images/logo2.png"/>
          <p class="logo-text">论房，你就是权威</p>
        </div>
        <div class="user-name">
          <input type="text" class="self-input" :class="{inputSelect:isNameStyle}" placeholder="请输入手机号" maxlength="11"
                 v-model="userName" @click="getNameFocus"  @blur="loseNameBlur" @input="getNameChange"/>
          <p class="login-tips" v-show="nametips.length>0"><span>{{nametips}}</span></p>
        </div>

        <div class="pass-word">
          <input type="password" class="self-input" :class="{inputSelect:isPwdStyle,isFill:isNamenull}" value="" placeholder="请输入密码"
                 maxlength="16"
                 v-model="passWord" @click="getPwdFocus" @keyup.enter="handleLogin()"  @blur="losePwdBlur"/>
          <p class="login-tips" v-show="pwdtips.length>0"><span ref="passwordTips">{{pwdtips}}</span></p>
        </div>

        <button class="save-btn-two" @click="handleLogin()">登录</button>

        <div class="remember-num" @click="handleSelect()" :class="{'rmb-select':isSelect}">
          <svg class="icon" aria-hidden="true" v-show="!isSelect">
            <use xlink:href="#icon-input-check"></use>
          </svg>
          <svg class="icon" aria-hidden="true" v-show="isSelect">
            <use xlink:href="#icon-selected"></use>
          </svg>
          记住账号
        </div>
        <p class="no-number">还没有账号，<a><span @click="goRegister()">立即注册</span></a> | <a><span
          @click="goForget">忘记密码</span>？</a></p>
      </div>
      <div class="footer">
        <!--<ul class="clearfix">-->
        <!--<li>-->
        <!--<a>关于我们</a>-->
        <!--</li>-->
        <!--<li>-->
        <!--<a>联系我们</a>-->
        <!--</li>-->
        <!--<li>-->
        <!--<a>商务合作</a>-->
        <!--</li>-->
        <!--<li>-->
        <!--<a>申请入驻</a>-->
        <!--</li>-->
        <!--</ul>-->
        <p>© 2018-2022
          微房科技保留一切权利 <br/>证件号码：91131003MA0A5CD179 冀ICP备18017960号</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex';
  import util from '@/lib/util';
  import LoginHeader from '@/components/LoginHeader';
  import {
    LOGIN_PASSWORD_SAME_CODE,
    SUCCESS_CODE,
    LOGIN_ACCOUNT_ERROR_CODE,
    LOGIN_ACCOUNT_NULL_CODE,
    LOGIN_PASSWORD_INVALID_CODE,
    LOGIN_PASSWORD_NULL_CODE,
    ACCOUNT_FORZEN
  } from '../../lib/returnCode';

  export default {
    name: 'LoginForm',
    components: {
      LoginHeader
    },
    data() {
      return {
        userName: '',//用户名内容
        passWord: '',//密码内容
        isSelect: false,
        isNameStyle: false,//正在输入手机号
        isPwdStyle: false,//正在输入密码

        nametips: '',//用户名错误提示
        pwdtips: '',//密码错误提
        isNamenull: false
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        if (vm.$route.query.code) {

          next({
            path: '/Release/ReleaseManage',
            query: {
              'code': vm.$route.query.code
            }
          })
        }
      })
      next()
    },
    mounted() {
      this.getStorage()
    },
    created() {

      if (this.$store.state.folderList.length > 0) {
        // 判断是否已经刷新
        return window.location.reload()
      }
      // 正式显示页面内容
      this.isReload = true

    },
    updated() {
    	if(this.passWord){
    		this.isNamenull = false;
    	}
    },
    watch: {
      userName(curVal, oldVal) {

        if (curVal.trim() !== oldVal.trim() && oldVal.trim().length > 0) {
          this.passWord = "";
          this.pwdtips = "";
        }
        this.nametips = "";
      },
      passWord(curVal, oldVal) {
        this.pwdtips = "";
      }

    },
    methods: {

      ...mapActions([
        'loginUser'
      ]),
      getNameFocus() {

        this.isNameStyle = true;
//      this.isPwdStyle = false;
      },
      getPwdFocus() {

//      this.isNameStyle = false;
        this.isPwdStyle = true;
      },
      loseNameBlur() {
      	if(!this.userName){
      		this.isNameStyle = false;
      	}
      },
      losePwdBlur() {
      	if(!this.passWord){
      		this.isPwdStyle = false;
      	}
      },
      
      getNameChange() {
      	this.isNamenull = true
      		this.isPwdStyle = false;
      	
      },
      //验证名字
      changeName() {
        this.isNameStyle = false;
        if (!this.userName.length) {
          this.nametips = "请输入手机号";
          return
        }
        if (!(/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.userName))) {
          this.nametips = "手机号格式错误";

        } else {
          this.nametips = "";
        }

      },
      //验证密码
      changePassword() {
        this.isPwdStyle = false;
        this.pwdtips = "";
        if (!this.passWord.length && this.userName.length > 0) {
          this.pwdtips = "请输入密码";
          return
        }
//登录的不需要验证密码格式，注册和改密码的时候需要验证
//        let pPattern = /^(?!\d+$)(?![A-Za-z_]+$)[a-zA-Z0-9_]{6,16}$/;
//        if (pPattern.test(this.passWord)) {
//          this.pwdtips = "";
//        } else {
//          if (this.userName.length > 0) {
//            this.pwdtips = "请输入正确格式的密码";
//          }
//        }
      },

      //登录
      handleLogin() {
        this.changeName();
        this.changePassword();
        if (this.nametips.length > 0 || this.pwdtips.length > 0) {
          return;
        }
        let that = this;
        if (this.nametips.length == 0 && this.pwdtips.length == 0) {
          this.loginUser({
            "account": this.userName,
            "expireDays": this.isSelect ? 3 : 0,
            "password": this.passWord
          }).then((res) => {

            if (res.code == LOGIN_ACCOUNT_ERROR_CODE || res.code == LOGIN_ACCOUNT_NULL_CODE) {

              that.nametips = res.msg;
              return false
            }
            if (res.code == LOGIN_PASSWORD_INVALID_CODE) {
              that.pwdtips = "用户名或密码错误";
              return false
            }

            if (res.code == ACCOUNT_FORZEN) {
              that.nametips = '该账号出于安全性已被暂时锁定，请明天重试';
              return false
            }
            if (res.code == SUCCESS_CODE) {
              if (that.isSelect) {
                localStorage.setItem('isSelect', that.isSelect);
                localStorage.setItem('name', that.userName);
                localStorage.setItem('passWord', that.passWord);
              }
              this.$router.push({
                path: '/Article'
              });

            }

          })
        }
      },
      //获取 localStorage
      getStorage() {
        this.isSelect = localStorage.getItem('isSelect');
        if (localStorage.getItem('name')) {
          this.userName = localStorage.getItem('name')
        }

        if (localStorage.getItem('passWord')) {
          this.passWord = localStorage.getItem('passWord')
        }

      },
      //记住密码
      handleSelect() {

        this.isSelect = !this.isSelect;

        if (!this.isSelect) {
          localStorage.removeItem('isSelect');
          localStorage.removeItem('name');
          localStorage.removeItem('passWord');
        }
      },
      //忘记密码
      goForget() {
        this.$router.push({
          path: '/ForgetPassword'
        });
      },

      goRegister() {
        this.$router.push({
          path: '/Register'
        });
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .login-page {
    position: relative;
    height: 100%;
    min-height: 580px;
    overflow-y: auto;
    background: $borderbottomColor;
    .banner {
      overflow: hidden;
      width: 100%;
      /*max-width: 1920px;*/
      height: 100%;
      background: url("../../assets/images/bg.jpg") no-repeat top center;
      background-size: 100% 100%;
    }
    .login-frame {
      margin: 137px auto 219px;
      width: 320px;
      text-align: center;
      .logo-box {
        margin: 0px 0px 112px;
        text-align: center;
        img {
          margin-bottom: 10px;
          width: 160px;
          height: 47px;
        }
        .logo-text {
          font-size: $fs20;
          color: $colorWhite;
        }
      }
      .user-name,
      .pass-word {
        position: relative;
        margin-bottom: 10px;
        .self-input {
          width: 280px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: $fs18;
          color: #65718a;
          border: 1px solid #65718a;
          border-radius: 25px;
          background: transparent;
        }
        .inputSelect {
          opacity: 1;
          color: $colorWhite;
          border-color: #9fa7b6;
        }
        .login-tips {
          position: absolute;
          top: -17px;
          left: 50%;
          margin-left: -160px;
          width: 320px;
          height: 24px;
          /*background: #8999B7;
                    border-radius: 2px;*/
          font-size: 14px;
          color: #3C4B68;
          line-height: 24px;
          span {
            background: #8999B7;
            border-radius: 2px;
            line-height: 24px;
            display: inline-block;
            padding: 0px 5px;
            max-width: 308px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &:after,
          &:before {
            border: solid transparent;
            content: ' ';
            height: 0;
            top: 100%;
            position: absolute;
            width: 0;
          }
          &:after {
            border-width: 6px;
            border-top-color: #8999B7;
            left: 152px;
          }
          &:before {
            border-width: 8px;
            border-top-color: #8999B7;
            left: 150px;
          }
        }
      }
      .remember-num {
        opacity: .3;
        margin-bottom: 45px;
        font-size: $fs14;
        color: $colorWhite;
        line-height: 20px;
        cursor: pointer;
        .icon {
          margin-right: 6px;
          width: 18px;
          height: 18px;
          vertical-align: middle;
        }
      }
      .rmb-select {
        opacity: 1;
        .icon {
          color: $colorWhite;
        }
      }
      .save-btn-two {
        margin-bottom: 16px;
        height: 50px;
        width: 320px;
        border-radius: 25px;
        font-size: $fs20;
        background: $borderColor;
        color: $mainfontColor;
      }
      .no-number {
        color: $colorWhite;
        font-size: $fs12;
        line-height: 20px;
        span {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
    .footer {
      position: absolute;
      bottom: 30px;
      width: 100%;
      text-align: center;
      ul {
        text-align: center;
        li {
          margin: 0px 11px;
          display: inline-block;
          a {
            font-size: $fs12;
            color: $colorWhite;
            text-align: center;
            line-height: 20px;
          }
        }
      }
      p {
        opacity: 0.3;
        font-size: $fs12;
        color: $colorWhite;
        text-align: center;
        line-height: 20px;
      }
    }
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $colorWhite;
    opacity: 0.3;;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $colorWhite;
    opacity: 0.3;;
  }

  input:-ms-input-placeholder {
    color: $colorWhite;
    opacity: 0.3;;
  }

  input::-webkit-input-placeholder {
    color: $colorWhite;
    opacity: 0.3;;
  }

  @media only screen and (max-width: 1440px) {
    .login-frame {
      margin: 80px auto 70px !important;
    }
    .logo-box {
      margin-bottom: 50px !important;
    }
  }

  @media only screen and (max-width: 900px) {
    .login-frame {
      margin: 60px auto 50px !important;
    }
    .logo-box {
      margin-bottom: 50px !important;
    }
  }

  input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #465574 inset;
    -webkit-text-fill-color: $colorWhite !important;
    border: 1px solid #9fa7b6 !important;
  }
  .isFill:-webkit-autofill{
  	-webkit-box-shadow: 0 0 0 30px #465574 inset;
    -webkit-text-fill-color: $colorWhite !important;
    border: 1px solid #65718a !important;
  }
</style>

